<template>
  <div class="emergency">
    <!-- 地图 -->
    <baidu-map class="bm-view" :center="BMcenter" :zoom="BMzoom" :map-type="MapType" :scroll-wheel-zoom="true"
      @ready="readHandler"></baidu-map>
    <!-- 头部工具切换 -->
    <div class="gjGroup">
      <el-button-group>
        <el-button size="small" :type="item.value == gjCurrut ? 'primary' : ''" v-for="(item, index) in btnGroupgj"
          :key="index" @click="gjClick(item)">{{ item.name }}</el-button>
      </el-button-group>
    </div>
    <!-- 通知弹窗 -->
    <informs ref="informRef" v-if="informIshow"></informs>
    <!-- 图层弹窗 -->
    <coverage ref="coverageRef" v-if="coverageIshow" @MapTypeClick="MapTypeClick"></coverage>
    <!-- 工具弹框 -->
    <tool ref="toolRef" v-if="toolIshow"></tool>
    <!-- 告警弹窗 -->
    <alarm ref="alarmRef" v-if="alarmIshow"></alarm>
  </div>
</template>

<script>
import informs from "@/views/emergency/gis/inform.vue";
import coverage from "@/views/emergency/gis/coverage.vue";
import tool from "@/views/emergency/gis/tool.vue";
import alarm from "@/views/emergency/gis/alarm.vue";
export default {
  components: {
    informs,
    coverage,
    tool,
    alarm,
  },
  data() {
    return {
      btnGroupgj: [
        { name: "通知", value: 1 },
        { name: "图层", value: 2 },
        { name: "工具", value: 3 },
        { name: "告警", value: 4 },
      ], //工具组
      gjCurrut: 1, //工具选中值
      // 百度地图参数
      BMcenter: { lng: 116.404, lat: 39.915 },
      BMzoom: 15,
      bmap: null, //地图实例
      BMap: null, //地图对象
      // 弹窗
      informIshow: false,
      toolIshow: false,
      coverageIshow: false,
      alarmIshow: false,
      MapType:'BMAP_NORMAL_MAP',//地图类型
    };
  },
  mounted() {},
  methods: {
    // 地图类型
    MapTypeClick(val) {
      console.log("MapTypeClick", val);
      this.MapType = val.value
      this.map.setMapType(val.value)
    },
    // 百度地图初始化
    readHandler({ BMap, map }) {
      console.log(BMap, map);
      // 经纬度暂时随便写的
      this.BMcenter.lng = 116.404;
      this.BMcenter.lat = 39.915;
      this.BMzoom = 15;
      this.bmap = map;
      this.BMap = BMap;
    },
    /**工具选中事件 */
    gjClick(item) {
      console.log(item);
      this.gjCurrut = item.value;
      if (this.gjCurrut == 2) {
        this.coverageIshow = true;

        this.$nextTick(() => {
          this.$refs.coverageRef.init();
        });
        this.toolIshow = false;
      } else if (this.gjCurrut == 1) {
        this.informIshow = true;
        this.$nextTick(() => {
          this.$refs.informRef.init();
        });
        this.toolIshow = false;
      } else if (this.gjCurrut == 4) {
        this.alarmIshow = true;
        this.$nextTick(() => {
          this.$refs.alarmRef.init();
        });
        this.toolIshow = false;
      } else if (this.gjCurrut == 3) {
        this.toolIshow = true;

        this.$nextTick(() => {
          this.$refs.toolRef.init();
        });
      }
    },
    
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/emergency.scss";
</style>
<style lang="scss" scoped>
@import "../../assets/emergency_gis.scss";
</style>
